@function rem($px) {
  @return $px / 100 + rem;
}
$main-color: #7f2974;
$c99: #999999;
$c66: #666666;
$cff: #ffffff;
.fr {
  float: right;
}
.fl {
  float: left;
}
html{
  font-size: 80px;
}
body {
  padding-top: rem(150);
}
img {
  max-width: 100%;
}
.top-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: $cff;
  .top-tips-nav {
    max-width: rem(1366);
    padding: 0 rem(160);
    line-height: rem(38);
    width: rem(1366);
    box-sizing: border-box;
    margin: 0 auto;
    .hello-text {
      color: $main-color;
      font-size: rem(14);
      font-weight: 500;
      letter-spacing: rem(1.2);
    }
    .tip-nav {
      background-color: #fff;
      padding: 0;
      .layui-nav-bar {
        background-color: transparent;
      }
      .layui-nav-item {
        line-height: inherit;
        a {
          color: $c99;
          font-size: inherit;
          font-size: inherit;
          padding: 0;
          margin-right: rem(33);
        }
        &.end-item a {
          margin-right: 0;
        }
      }
    }
  }
  .top-line {
    height: rem(2);
    background-color: $main-color;
    margin: 0;
    padding: 0;
  }
  .top-icon-box {
    width: rem(1366);
    font-size: 0;
    max-width: rem(1366);
    margin: 0 auto;
    padding: rem(10) 0 0 rem(169);
    box-sizing: border-box;
    .box-style {
      display: inline-block;
      color: $c66;
      font-size: 0;
      ul {
        display: inline-block;
        vertical-align: middle;
        li {
          font-family: PingFangSC-Regular;
          font-size: rem(14);
        }
      }
    }
    .tel-info-box {
      img {
        display: inline-block;
        width: rem(45);
        height: rem(32);
        margin-right: rem(10);
        vertical-align: middle;
      }
    }
  }
  .logo {
    width: rem(50);
    height: rem(50);
    display: inline-block;
    margin-left: rem(238);
    margin-right: rem(304);
  }
  .local-info-box {
    img {
      width: rem(34);
      height: rem(40);
      margin-right: rem(10);
    }
  }
  .nav-box {
    max-width: rem(1366);
    margin: 0 auto;
    color: #303030;
    background-color: $cff;
    padding: 0 rem(170);
    .layui-nav-bar {
      background-color: transparent;
    }
    .layui-nav-item {
      line-height: rem(50);
      &.active a {
        color: $main-color;
      }
      a {
        color: initial;
        font-size: rem(18);
        padding: 0;
        margin-right: rem(93);
      }
      &.end-item a {
        margin-right: 0;
      }
    }
  }
}
.container{
  max-width: 1366px;
  margin: 0 auto;
  .layui-carousel-ind{
    top:-52px;
  }
  .layui-carousel[lay-arrow=hover] .layui-carousel-arrow {
    left: 50px;
  }
  .layui-carousel[lay-arrow=hover] .layui-carousel-arrow[lay-type=add]{
    right:50px;
    background: url('../images/arow-right.png') 0 0 no-repeat;
    background-size: contain;
  }
  .layui-carousel-ind li.layui-this{
    background-color: $main-color
  }
  .layui-carousel-ind ul,.layui-carousel-ind ul:hover{
    background-color: transparent;
  }
  .layui-carousel-ind li{
    margin: 0 7px;
    width: 16px;
    height: 16px;
    background-color: #dedede;
  }
}
.carousel-box{
  .layui-carousel-arrow{
    background: url('../images/arow-left.png') 0 0 no-repeat;
    background-size: contain;
    width: 52px;
    height: 110px;
    color:transparent;
  }
  div img{
    width: 100%;
    object-fit: cover;
  }
}
// 培训项目
.project-box{
  background-color: #F6F7F8;
  padding-top: 80px;
  .project-title{
    margin: 0 auto;
    width: 400px;
    height: 107px;
    display: block;
  }
  .project-info{
    border-color: $main-color;
    width: 700px;
    margin: 0 auto;
    margin-top: 48px;
    legend{
      padding: 0 40px;
      margin-left: 207px;
      font-size: 30px;
      color: #333;
    }
  }
  .project-info-box{
    padding: 70px 186px 0;
    .info-item{
      background-color: $cff;
      padding: 75px 20px 0;
      width: 280px;
      height: 330px;
      text-align: center;
      border: 4px solid $main-color;
      margin-right: 77px;
      position: relative;
      &:last-child{
        margin-right: 0;
      }
      .item-title{
        font-size: 28px;
        color: $main-color;
      }
      .item-line{
        width: 80px;
        height: 6px;
        background-color:#fff;
        margin: 0 auto;
        padding-top: 18px;
        border-bottom: 6px solid $main-color;
      }
      p{
        font-size: 17px;
        line-height: 44px;
        padding-top: 22px;
        color: #555555;
      }
      .nums-text{
        width: 55px;
        height: 65px;
        background: url('../images/num-bg.png') 0 0 no-repeat;
        background-size: contain;
        font-size: 26px;
        color: $cff;
        padding-top: 15px;
        position: absolute;
        top:-30px;
        left:50%;
        transform:translateX(-50%);
      }
    }
  }
  p.info-slogan{
    text-align: center;
    font-size: 22px;
    color: #333;
    margin: 50px auto 72px;
  }
  .project-content-title{
    border-color: $main-color;
    width: 600px;
    margin: 0 auto;
    legend{
      padding: 0 25px;
      margin-left:187px;
      font-size: 30px;
      color: #333;
    }
  }
  .project-content{
    padding: 40px 160px;
    font-size: 0;
    .content-item{
      padding: 10px;
      display: inline-block;
      margin-bottom: 40px;
      background:rgba(248,248,248,1);
      box-shadow:0px 6px 20px 0px rgba(222,222,222,0.4);
      width: 220px;
      height: 300px;
      box-sizing: border-box;
      margin-right: 55px;
      text-align: center;
      &:nth-child(4),&:nth-child(8){
        margin-right: 0
      }
      img{
        width: 200px;
        height: 200px;
      }
      p{
        padding-top: 30px;
        font-size: 24px;
        color: #111;
      }
    }
  }
}
// server porject
.server-box{
  padding-top: 80px;
  padding-bottom: 70px;
  .project-title{
    margin: 0 auto;
    width: 400px;
    height: 107px;
    display: block;
    padding-bottom: 57px;
  }
  .server-tab{
    box-sizing: border-box;
    padding: 30px 64px 44px;
    margin: 0 auto;
    width:1046px;
    height:524px;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 16px 0px rgba(222,222,222,0.4);
    .tab-title-box{
      border-bottom-style:none;
      text-align: center;
      height: 50px;
      li{
        box-sizing: border-box;
        width: 170px;
        line-height: 50px;
        border: 1px solid $main-color;
        border-radius: 25px;
        font-size: 22px;
        color:$main-color;
        margin-right: 92px;
        &.layui-this{
          color: $cff;
          background-color: $main-color;
        }
        &.layui-this:after{
          border:none;
        }
        &:last-child{
          margin-right: 0
        }
      }
    }
    .layui-tab-content{
      padding: 20px 0 0;
    }
    .item-box{
      font-size: 0;
      .server-item-info{
        position: relative;
        width: 260px;
        height: 380px;
        margin-right: 68px;
        display: inline-block;
        &:last-child{
          margin-right: 0
        }
        .server-item-blank{
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 140px;
          background-color: rgba(0,0,0,.6);
          p.title{
            font-size:20px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:45px;
            text-align: center;
          }
          p.server-info-text{
            padding: 0 20px;
            font-size:15px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            line-height: 30px;
            color:rgba(255,255,255,1);
          }
        }
      }
    }
  }
}
// video-box
.video-box{
  padding-top: 80px;
  padding-bottom: 80px;
  background-color:#f6f7f8;
  .project-title{
    margin: 0 auto;
    width: 400px;
    height: 107px;
    display: block;
    padding-bottom: 58px;
  }
  .video-content-box{
    margin: 0 auto;
    width:1099px;
    height:530px;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 20px 0px rgba(222,222,222,0.4);
    padding: 10px;
    box-sizing: border-box;
    font-size: 0;
    .video-container{
      width: 824px;
      height: 510px;
      display: inline-block;
    }
    .video-list{
      display: inline-block;
      width: 240px;
      vertical-align: top;
      margin-left: 12px;
      .video-list-title{
        border-bottom: 1px solid $main-color;
        padding-bottom: 11px;
        box-sizing: border-box;
      }
      .title{
        font-size: 20px;
        color: #111;
        margin-bottom: 5px;
      }
      .title-text{
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:#555;
        line-height:26px;
      }
      .video-item-box{
        line-height:30px;
        color: #333;
        padding-top: 10px;
        box-sizing: border-box;
        .video-item{
          font-size: 0;
          margin-bottom: 10px;
          &.active img{
            border: 1px solid #E9709B;
            box-sizing: border-box;
          }
          img{
            object-fit: cover;
            display: inline-block;
            width: 152px;
            height:88px;
            margin-right: 8px;
          }
          p{
            width: 80px;
            display: inline-block;
            font-size: 16px;
            vertical-align: middle;
            color: #333;
          }
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
// teacher
.teacher-box{
  padding-top: 80px;
  .project-title{
    margin: 0 auto;
    width: 400px;
    height: 107px;
    display: block;
    padding-bottom: 50px;
  }
  .teacher-content{
    font-size: 0;
    text-align: center;
    padding-bottom: 140px;
    .teacher-item{
      width: 200px;
      height: 300px;
      margin-right: 22px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      &:hover  .teacher-info{
        top:0;
      }
      &:nth-of-type(even){
        position: relative;
        top:70px;
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      &:last-child{
        margin-right: 0;
      }
      .teacher-info{
        position: absolute;
        width: 100%;
        height: 100%;
        top:240px;
        left: 0;
        right: 0;
        text-align: center;
        background-color: rgba(0,0,0,.6);
        .t-name{
          font-size:22px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          padding: 20px 0 18px;
        }
        .t-text{
          font-size:16px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          padding: 0 14px;
          margin-bottom: 30px;
          text-align: left;
        }
        .t-btn{
          width:120px;
          line-height:32px;
          border:1px solid rgba(255,255,255,1);
          border-radius:16px;
          color: #fff;
          font-size: 16px;
          margin: 0 auto;
          cursor: pointer;
          transition: all .5s;
          &:hover{
            background-color:#fff;
            color:#333;
            transition: all .5s;
          }
        }
      }
    }
  }
}
// student -box 
.student-box{
  padding-top: 80px;
  padding-bottom: 50px;
  background-color: #f6f7f8;
  .project-title{
    margin: 0 auto;
    width: 400px;
    height: 107px;
    display: block;
    padding-bottom: 211px;
  }
  .student-content{
    font-size: 0;
    text-align: center;
    .student-item{
      box-shadow: 0px -4px 20px 0px rgba(239,239,239,0.6), 0px 4px 10px 0px rgba(222,222,222,0.8);
      height: 170px;
      width: 230px;
      margin-right: 20px;
      display: inline-block;
      background-color: #F0F0F0;
      padding: 7px 15px 0;
      box-sizing: border-box;
      position: relative;
      &:hover .student-card{
        top: -70%;
        transition: all .5s;
      }
      &:hover .student-card .student-info{
        -webkit-transition: all 1s ease-in 1s;
        transition: all 1s ease-in 1s;
        height:auto;
      }
      .out-bg{
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 3;
        background: url('../images/user-bg2.png') bottom no-repeat;
        background-size: contain;
        width: 230px;
        height: 109px;
        padding-top: 56px;
        box-sizing: border-box;
        p{
          color: $main-color;
          font-size: 20px;
          text-align: center;
        }
      }
      .student-card{
        box-shadow: 0px 4px 10px 0px rgba(222,222,222,0.8);
        position: absolute;
        right: 15px;
        left: 15px;
        top: 7px;
        transition: all .5s;
        padding-bottom: 40px;
        box-sizing: border-box;
        background-color: #f7f7f7;
        .student-head{
          width: 65px;
          height: 65px;
          border-radius: 50%;
          border: 2px solid #E9709B;
          box-sizing: border-box;
          position: absolute;
          left: 50%;
          top:-40px;
          transform: translateX(-50%);
        }
        .student-info{
          -webkit-transition: all 1s ease-in 1s;
          transition: all 1s ease-in 1s;
          padding: 48px 12px 0;
          box-sizing: border-box;
          text-align: center;
          background-color: #f7f7f7;
          height: 100px;
          overflow: hidden;
          .student-name{
            color: #333333;
            font-size: 20px;
            margin-bottom: 14px;
          }
          .student-text{
            font-size: 16px;
            color: #666;
          }
        }
      }
      &:last-child{
        margin-right: 0;
      }
    }
  }
}
// footer
 footer{
   padding-top: 60px;
   text-align: center;
   padding-bottom: 60px;
   .bottom-title{
     margin: 0 auto;
     display: block;
     width: 357px;
     height: 198px;
     object-fit: contain;
   }
   p{
     margin: 50px auto 10px;
   }
   p,.bottom-nav span a{
     color: #aaa;
   }
   .layui-breadcrumb a:hover {
    color: $main-color!important;
}
 }